<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>乐购商城-产品详情</title>

    <!-- 1. 重置样式 -->
    <link rel="stylesheet" href="../css/normalize.css">

    <!-- 2. 公共样式 -->
    <link rel="stylesheet" href="../css/common.css">

    <!-- 3. 当前样式 -->
    <link rel="stylesheet" href="./prodetail.css">

    <link rel="stylesheet" href="../lib/mf/css/magnifier.css">

    <!-- jQuery -->
    <script src="../lib/jquery-1.11.3/jquery.js"></script>

    <script src="../lib/mf/js/magnifier.js"></script>

    <!-- 当前js文件 -->
    <script src="./productdetail.js"></script>
</head>

<body style="padding-bottom : 200px">

    <!-- 头部 -->
    <div class="head">
        <div class="container-fluid bgc000 head-top">
            <div class="container clearfix cfff">
                <a class="fl cfff ti210" href="#">legochina.cn</a>
                <p class="fr">欢迎光临<a class="cf60" href="#">乐购</a>，请 <a class="cf60" href="#">登陆</a>\<a class="cf60"
                        href="#">注册</a></p>
                <h1 class="logo"><a href="#"><img src="../imgs/logo.jpg" alt=""></a></h1>
            </div>
        </div>


        <div class="container clearfix pt4b22 search-box">
            <div class="head-shopping fr">
                <a class="head-shopcar" href="#">购物车 <span>3</span></a>
                <a href="#">我的订单</a>
            </div>


            <div class="head-search mr40 fr">
                <input class="head-text fl" type="text" placeholder="创意文具">
                <button class="head-btn fl"></button>
            </div>
        </div>

        <div class="container head-nav clearfix">
            <ul class="fr pr100">
                <li><a href="#">图书</a></li>
                <li><a href="#">电子书</a></li>
                <li><a href="#">原创文学</a></li>
                <li><a href="#">服装</a></li>
                <li><a href="#">户外运动</a></li>
                <li><a href="#">孕婴童</a></li>
                <li><a href="#">家具</a></li>
                <li><a href="#">创意文具</a></li>
                <li><a href="#">地方特产</a></li>
                <li><a href="#">海外购</a></li>
                <li><a href="#">电器城</a></li>
            </ul>
        </div>

    </div>


    <!--产品详情-->
    <div id="proDetail" class="proDetail container-fluid p20 bgcf3 bs">
        <p class="container">
            <a href="#">图书</a> >
            <a href="#">小说</a> >
            <a href="#">情感/家庭/婚姻</a> >
            <a href="#">博集天卷</a> >
            <a href="#">她和他</a>
        </p>
        <div class="container clearfix bgcfff p1020 bs">

            <!--放大镜-->
            <div class="fl">
                <div class="magnifier" id="magnifier1">
                    <div class="magnifier-container">
                        <div class="images-cover"></div>
                        <!--当前图片显示容器-->
                        <div class="move-view"></div>
                        <!--跟随鼠标移动的盒子-->
                    </div>
                    <div class="magnifier-assembly">
                        <div class="magnifier-btn">
                            <span class="magnifier-btn-left">&lt;</span>
                            <span class="magnifier-btn-right">&gt;</span>
                        </div>
                        <!--按钮组-->
                        <div class="magnifier-line">
                            <ul class="clearfix animation03">
                                <li>
                                    <div class="small-img">
                                        <img src="../lib/mf/images/1.png" />
                                    </div>
                                </li>
                                <li>
                                    <div class="small-img">
                                        <img src="../lib/mf/images/2.png" />
                                    </div>
                                </li>
                                <li>
                                    <div class="small-img">
                                        <img src="../lib/mf/images/3.png" />
                                    </div>
                                </li>
                                <li>
                                    <div class="small-img">
                                        <img src="../lib/mf/images/4.png" />
                                    </div>
                                </li>
                                <li>
                                    <div class="small-img">
                                        <img src="../lib/mf/images/1.png" />
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!--缩略图-->
                    </div>
                    <div class="magnifier-view"></div>
                    <!--经过放大的图片显示容器-->
                </div>
            </div>



            <!--图书详情-->
            <div class="fr bookdetail">
                <div class="p1020">
                    <h2 class="fs20">她和他</h2>
                    <p class="cred">《偷影子的人》作者马克·李维重磅新作，法国连续60周在榜，销量突破120万册</p>
                    <p>[法] 马克·李维 著；杨亦雨 译</p>
                </div>
                <div class="bgcccc p1020 priceDel">
                    <p>
                        <span>乐 购 价：</span>
                        <span class="cred f20">&yen;26.20</span> <span>[6.9折] </span>
                        <span>[定价：￥38.00]</span>
                        <span>(降价通知)</span>
                    </p>
                    <p>
                        <span>促销信息：</span>
                        <span class="cred f12">满减 每满150.00元，可减50.00元现金</span>
                        <a href="#">详情 >></a>
                    </p>
                    <p>
                        <span>领 券：</span>
                        <i>100-6</i>
                        <i>200-50</i>
                    </p>
                    <p class="evaluation">
                        <span>累计评价</span>
                        <span class="cf60">10000</span>
                    </p>
                </div>
                <p class="p1020 catCheck">
                    <span>种类选择：</span>
                    <b>平装版</b>
                    <b>精装版</b>
                    <b>豪华版</b>
                    <b>豪华版plus</b>
                </p>

                <div class="clearfix p1020 mt30">
                    <div class="proNum fl">
                        <input type="text" value="1">
                        <a id="addNum">+</a>
                        <a id="reNum">-</a>
                    </div>
                    <p class="addCar fl"><a class="cfff" href="#">加入到购物车</a></p>
                </div>
            </div>


        </div>
    </div>




</body>

</html>